<template>
  <div class="search">
    <van-nav-bar title="标题" left-arrow right-text="搜索" @click-left="onClickLeft">
      <template #title>
        <van-search v-model="state.ids" placeholder="输入搜索内容" shape="round" @search="search"/>
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item v-model="state.value1" :options="option1" />
      <van-dropdown-item v-model="state.value2" :options="option2" />
      <van-dropdown-item v-model="state.value3" :options="option3" />
    </van-dropdown-menu>
    <div>
      <van-card
        v-for="(item,i) in state.shopData"
        :key="i"
        :price="item.unitPrice + '元 / 斤'"
        :desc="item.titleLang"
        currency=""
        :title="item.title"
        :thumb="item.imgUrl[0]"
      >
        <template #tags>
          <van-tag plain type="success">企业认证</van-tag>
          <van-tag plain type="success">实名认证</van-tag>
        </template>
        <template #footer>
        </template>
      </van-card>
    </div>
  </div>

</template>

<script>
import { onBeforeUpdate, onMounted, reactive, ref } from 'vue';
import router from "../../router";
export default {
  setup(){
    const state = reactive({
      ids: "1",
      value1: 0,
      value2: "a",
      value3: "a",
      shopData: [],
    });
    const option1 = [
      { text: '全国', value: 0 },
    ];
    const option2 = [
      { text: '综合排序', value: 'a' },
      { text: '距离排序', value: 'b' },
      { text: '价格排序', value: 'c' },
    ];
    const option3 = [
      { text: '筛选', value: 'a' },
    ];
    const onClickLeft = () => {
      router.back();
    };
    onMounted(()=>{
      state.ids = router.currentRoute.value.params.ids;
      getSearch();
    });
    onBeforeUpdate(() => {
      console.log(state.ids);
    });
    // 搜索框的确定搜索事件
    const search = () => {
      if(state.ids !== "") {
        console.log(state.ids);
        router.push("/search/" + state.ids);
        console.log(1);
      } else {
        router.push("/search/洋葱");
        console.log(2);
      }
      getSearch();
    }
    const getSearch = () => {
      fetch("http://www.pudge.wang:5000/api/home/search", {
        method: "POST", // 使用 POST
        body:JSON.stringify({keyword: state.ids}),
        headers:{
          'Content-Type': 'application/json;charset=utf-8'
        },
      })
        .then((response) => response.json())
        .then((res) => {
          state.shopData = res.result;
          console.log(state.shopData);
        });
    };
    return { state, option1, option2, option3, search, onClickLeft };
  }
}
</script>
<style scoped>
</style>